<template>
  <div class="min-h-screen">
    <!-- Hero Section -->
    <section class="relative bg-blue-900 text-white py-24" :style="backgroundStyle">
      <div class="absolute inset-0">
        <div class="absolute inset-0 bg-gradient-to-r from-blue-900 to-blue-800 opacity-90"></div>
      </div>
      <div class="relative container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center" v-animate="{ type: 'fade', duration: 1000, delay: 200 }">
          <h1 class="text-4xl sm:text-5xl font-bold mb-6">
            我们的团队
          </h1>
          <p class="text-xl text-gray-300 mb-8">
            专业的技术团队，为您提供优质的服务
          </p>
        </div>
      </div>
    </section>
      
    <!-- Leadership Section -->
    <section class="py-20 bg-white dark:bg-gray-900">
      <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center mb-16" v-animate="{ type: 'slide', duration: 800, delay: 300 }">
          <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">核心团队</h2>
          <p class="text-gray-700 dark:text-gray-300">经验丰富的管理团队，引领公司发展</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div v-for="(leader, index) in team.leadership" :key="leader.name"
            v-animate="{ type: 'scale', duration: 800, delay: 300 * (index + 1) }"
            class="text-center">
            <div class="relative mb-6 mx-auto w-48 h-48 rounded-full overflow-hidden group">
              <img :src="leader.image" :alt="leader.name" class="w-full h-full object-cover">
              <div class="absolute inset-0 bg-blue-600/80 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
                <div class="flex space-x-4">
                  <a v-for="social in leader.social" :key="social.name"
                    :href="social.link"
                    class="text-white hover:text-blue-200 transition duration-300">
                    <SocialIcons :platform="social.name.toLowerCase()" />
                  </a>
                </div>
              </div>
            </div>
            <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">{{ leader.name }}</h3>
            <p class="text-blue-600 mb-4">{{ leader.position }}</p>
            <p class="text-gray-700 dark:text-gray-300">{{ leader.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Team Section -->
    <section class="py-20 bg-gray-50 dark:bg-gray-800">
      <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center mb-16">
          <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">技术团队</h2>
          <p class="text-gray-700 dark:text-gray-300">专业的技术人才，为项目保驾护航</p>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          <div 
            v-for="(member, index) in team.members"
            :key="member.name"
            v-animate="{ type: 'scale', duration: 800, delay: 300 * (index + 1) }"
            class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 text-center hover:shadow-xl transition duration-300"
          >
            <div class="mb-6">
              <img 
                :src="member.avatar" 
                :alt="member.name" 
                class="w-32 h-32 rounded-full mx-auto object-cover border-4 border-blue-600"
              >
            </div>
            <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">{{ member.name }}</h3>
            <p class="text-gray-700 dark:text-gray-300 mb-4">{{ member.role }}</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">{{ member.bio }}</p>
            <div class="flex justify-center space-x-4">
              <a v-for="(link, platform) in member.socialLinks" 
                :key="platform" 
                :href="link" 
                class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
              >
                <SocialIcons :platform="platform" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Values Section -->
    <section class="py-20 bg-gray-50 dark:bg-gray-900">
      <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center mb-16">
          <h2 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">我们的价值观</h2>
          <p class="text-gray-700 dark:text-gray-300">坚持的信念，成就卓越的团队</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div v-for="value in team.values" :key="value.title"
            v-animate="{ type: 'fade', duration: 800, delay: 300 }"
            class="text-center">
            <div class="w-16 h-16 mx-auto mb-6 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
              <img :src="value.icon" :alt="value.title" class="w-8 h-8 text-blue-600 dark:text-blue-400">
            </div>
            <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">{{ value.title }}</h3>
            <p class="text-gray-600 dark:text-gray-400">{{ value.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Join Us Section -->
    <section class="py-20 bg-blue-600 text-white">
      <div class="container mx-auto px-4">
        <div class="max-w-4xl mx-auto text-center">
          <h2 class="text-3xl sm:text-4xl font-bold mb-6">加入我们</h2>
          <p class="text-xl mb-8">与优秀的人一起工作，成就精彩的未来</p>
          <div class="flex flex-wrap justify-center gap-4">
            <button @click="showPositions" class="px-8 py-3 bg-white text-blue-600 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">
          查看职位
        </button>
            <button @click="showTeamInfo" class="px-8 py-3 border-2 border-white text-white rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition duration-300">
              了解更多
            </button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { usePageData, usePageBackground } from '@/composables'
import SocialIcons from '../components/icons/SocialIcons.vue'
import ValueIcons from '../components/icons/ValueIcons.vue'
import { inject } from 'vue'

const { team } = usePageData()
const { backgroundStyle } = usePageBackground('team')
const dialog = inject('dialog')

const showPositions = async () => {
  try {
    await dialog.open('demo', {
      title: '职位列表',
      message: '当前没有开放的职位，请稍后查看！',
      showCancel: false
    })
    console.log('用户查看了职位列表')
  } catch (err) {
    // User cancelled or closed dialog
  }
}

const showTeamInfo = async () => {
  try {
    await dialog.open('demo', {
      title: '团队介绍',
      message: '我们是一支充满激情和创造力的团队，期待您的加入！',
      showCancel: false
    })
    console.log('用户查看了团队介绍')
  } catch (err) {
    // User cancelled or closed dialog
  }
}
</script>